<template>
    <div>
        <pagetitle type="2"></pagetitle>
        <el-card>
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="全部" name="first">
                    <div class="tabtop">
                        <el-button>导出全部</el-button>
                        <div class="tabtopr">
                            <div class="tabtoprl">
                                创建时间
                                <div class="tabtoprlItem">近6个月</div>
                                <div class="tabtoprlItem">今年以来</div>
                                <div class="tabtoprlItem">去年</div>
                                <div class="tabtoprlItem">自定义（不超过1年）</div>
                            </div>
                            <div>
                                <el-input v-model="input3" style="width: 430px" placeholder="请输入订单号">
                                    <template #suffix>
                                        <el-icon class="el-input__icon"><Search /></el-icon>
                                    </template>
                                </el-input>
                                <el-button>
                                    <el-icon class="el-input__icon"><RefreshRight /></el-icon>
                                </el-button>
                            </div>
                        </div>
                    </div>
                    <el-table :data="[{}]" style="width: 100%">
                        <el-table-column prop="date" label="产品信息" />
                        <el-table-column prop="name" label="订单类型" />
                        <el-table-column prop="name" label="订单状态" />
                        <el-table-column prop="name" label="订单金额（￥）" />
                        <el-table-column prop="name" label="应付金额（￥）" />
                        <el-table-column prop="name" label="操作" />
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="空间" name="second">空间</el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>
<script setup lang="ts">
const activeName = "first";
</script>
<style scoped lang="scss">
.tabtop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .tabtopr {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .tabtoprl {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-right: 20px;
            .tabtoprlItem {
                height: 32px;
                line-height: 32px;
                background: #f1f1f1;
                margin-left: 5px;
                padding: 0 5px;
                cursor: pointer;
            }
        }
        button {
            margin-left: 20px;
        }
    }
}
</style>
